<template>
	<div>
		<!-- A -->
		<h1>A</h1>
		<el-table
			:data="AShowData"
			stripe
			style="width: 100%"
			row-key="id">
			<el-table-column
				prop="type"
				label="type"
				width="180" />
			<el-table-column
				prop="name"
				label="name"
				width="180" />
			<el-table-column
				prop="age"
				label="age"
				width="180" />
		</el-table>
		<el-pagination
			v-model:current-page="APagination.currentPage"
			layout="prev, pager, next"
			:total="APagination.totalLength"
			:default-page-size="APagination.pageSize"
			@current-change="AHandleCurrentChange" />
		<!-- B -->
		<br />
		<h1>B</h1>
		<el-table
			:data="BShowData"
			stripe
			style="width: 100%"
			row-key="id">
			<el-table-column
				prop="type"
				label="type"
				width="180" />
			<el-table-column
				prop="name"
				label="name"
				width="180" />
			<el-table-column
				prop="age"
				label="age"
				width="180" />
		</el-table>
		<el-pagination
			v-model:current-page="BPagination.currentPage"
			layout="prev, pager, next"
			:total="BPagination.totalLength"
			:default-page-size="BPagination.pageSize"
			@current-change="BHandleCurrentChange" />
		<!-- C -->
		<br />
		<h1>C</h1>
		<el-button @click="getCShowData">获取 C 数据</el-button>
		<br />
		<el-button @click="setRequest">setRequest</el-button>
		<br />
		<el-input v-model="reqeustData.filter"></el-input>
		<el-table
			:data="CShowData"
			stripe
			style="width: 100%"
			row-key="id">
			<el-table-column
				prop="type"
				label="type"
				width="180" />
			<el-table-column
				prop="name"
				label="name"
				width="180" />
			<el-table-column
				prop="age"
				label="age"
				width="180" />
		</el-table>
		<el-pagination
			v-model:current-page="CPagination.currentPage"
			layout="prev, pager, next"
			:total="CPagination.totalLength"
			:default-page-size="CPagination.pageSize"
			@current-change="CHandleCurrentChange" />
	</div>
</template>

<script lang="ts" setup>
import { useTable } from './useTable';
import { getADataAPI, getBDataAPI, getCDataAPI } from '../api';
import { ref } from 'vue';

const {
	showData: AShowData,
	pagination: APagination,
	handleCurrentChange: AHandleCurrentChange,
} = useTable({
	get: {
		api: getADataAPI,
		params: {},
	},
	options: {
		isUseFEPaging: true,
	},
});

const {
	showData: BShowData,
	pagination: BPagination,
	handleCurrentChange: BHandleCurrentChange,
} = useTable({
	get: {
		api: getBDataAPI,
		params: {},
	},
	options: {},
});

const reqeustData = {
	filter: ''
}
const setRequest = () => {
	reqeustData.filter = '123456'
}
const {
	showData: CShowData,
	pagination: CPagination,
	handleCurrentChange: CHandleCurrentChange,
	getShowData: getCShowData,
} = useTable(
	{
		get: {
			api: getCDataAPI,
		},
		options: {
			immediatly: false,
			isUseFEPaging: true,
			path: {
				data: 'record',
				total: 'length',
				pageSize: 'size',
				currentPage: 'pageNo',
			},
		},
	},
	reqeustData,
);
</script>

<style lang="scss" scoped></style>
